<template>
  <div>
    <formula :isBtn="false">
      <span class="vhtml" v-html="showContent"></span>
    </formula>
    <div class="ab">
      <div class="a">时差公式：</div>
      <div class="b">
        <el-select
          size="small"
          style="width: 120px"
          v-model="firstDateProp"
          placeholder="请选择时间"
          @change="handleChange"
        >
          <template v-for="(item, i) in cols">
            <template v-if="item.column">
              <el-option
                v-for="(childItem, j) in item.column"
                :key="j"
                :label="`${item.label}.${childItem.label}`"
                :value="`${item.prop}.${childItem.prop}`"
              />
            </template>
            <template v-else>
              <el-option :key="i" :label="item.label" :value="item.prop" />
            </template>
          </template>
        </el-select>
        <el-select size="small" style="width: 80px" v-model="addOrSubtract">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          size="small"
          style="width: 150px"
          v-model="secondDateProp"
          placeholder="请选择数字对象"
        >
          <template v-for="(item, i) in dateCols">
            <template v-if="item.column">
              <el-option
                v-for="(childItem, j) in item.column"
                :key="j"
                :label="`${item.label}.${childItem.label}`"
                :value="`${item.prop}.${childItem.prop}`"
              />
            </template>
            <template v-else>
              <el-option :key="i" :label="item.label" :value="item.prop" />
            </template>
          </template>
        </el-select>
        <el-select size="small" style="width: 70px" v-model="dateUnit">
          <el-option
            v-for="item in dateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
  import formula from './formula.vue';
  import mixcontent from './mixcontent';
  import mixdate from './mixdate';
  import _ from 'lodash';
  import { formulas } from '../index';
  export default {
    mixins: [mixcontent, mixdate],
    components: {
      formula
    },
    data() {
      return {
        addOrSubtract: 'add',
        options: [
          {
            value: 'subtract',
            label: '往前'
          },
          {
            value: 'add',
            label: '往后'
          }
        ],
        timeType: ''
      };
    },
    computed: {
      allContentStr: function () {
        return {
          addOrSubtract: this.addOrSubtract,
          secondDateProp: this.secondDateProp,
          firstDateProp: this.firstDateProp,
          dateUnit: this.dateUnit
        };
      }
    },
    mounted() {
      const { showContent, formulaType, addOrSubtract, timeType } = this.item;
      if (formulaType === formulas.date && showContent) {
        this.showContent = showContent;
      } else {
        this.showContent = this.formatContent();
      }
      if (addOrSubtract) {
        this.addOrSubtract = addOrSubtract;
      }
      if (timeType) {
        this.timeType = timeType;
      }
    },
    watch: {
      allContentStr() {
        this.showContent = this.formatContent();
      },
      showContent(val) {
        this.$emit('on-date', {
          showContent: val,
          firstDateProp: this.firstDateProp,
          dateUnit: this.dateUnit,
          addOrSubtract: this.addOrSubtract,
          secondDateProp: this.secondDateProp,
          timeType: this.timeType
        });
      }
    },
    methods: {
      formatContent() {
        const firstObj = this.getDateLabel(this.firstDateProp, true);
        let dateUnitStr = '年';
        const obj = _.filter(this.dateOptions, { value: this.dateUnit });

        if (obj.length) {
          dateUnitStr = obj[0].label;
        }

        let addOrSubtractStr = '往后';

        if (this.addOrSubtract === 'subtract') {
          addOrSubtractStr = '往前';
        }

        const obj2 = this.getDateLabel(
          this.secondDateProp,
          false,
          this.dateCols
        );

        return `${this.getLabel(
          firstObj.str || '时间'
        )} ${addOrSubtractStr} ${this.getLabel(
          obj2.str || '多少'
        )} ${this.getLabel(`(${dateUnitStr})`)}`;
      },
      handleChange(prop) {
        let type = '';
        const props = prop.split('.');
        const item = _.filter(this.cols, { prop: props[0] })[0];
        if (item?.type) {
          type = item.type;
        }
        if (item?.column) {
          const itemChild = _.filter(item.column, { prop: props[1] })[0];
          if (itemChild?.type) {
            type = itemChild.type;
          }
        }
        this.timeType = type;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import 'modal';
</style>
